<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Vue + Webpack</title>
</head>

<body>
    <script type="text/javascript" src="vue.js"></script>
</body>
<div id="app">
    <a>{{ fullName }}</a>
</div>
<script type="text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'aaaa'
    },
    computed: {
        fullName: {
            get: function() {
                return this.firstName + ' ' + this.lastName
            },
            set: function(newValue) {
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        }
    }
})

document.addEventListener('click',function(){
    vm.fullName = 'John Doe'
},false)


</script>

</html> 
